<!--
 * @Author: monet hanxu@huaun.com
 * @Date: 2023-09-21 16:23:12
 * @LastEditors: zhangyonggui
 * @LastEditTime: 2023-12-21 11:03:07
 * @FilePath: /h-radar-expose/pages/Exposure/ExposeList/domainDetial.vue
 * @Description:
-->
<template>
  <LayoutDetail
    :title-btn="titleBtn"
    :left-num="2"
    :head-num="3"
    :tabs-list="tabsList"
    :tab-active="tabActive"
    @showPrompt="showPrompt"
  >
    <!-- 左侧 -->
    <template #title>
      <el-tooltip effect="dark" :content="basicInfo.name" placement="bottom">
        <span>{{ basicInfo.name }}</span>
      </el-tooltip>
    </template>
    <template #content-title-1>基本信息</template>
    <template #content-body-1>
      <LayoutInfoList :info-list="infoList"></LayoutInfoList>
    </template>
    <template #content-title-2>标签</template>
    <template #content-body-2>
      <TagManip
        :dynamic-tags="basicInfo.tag"
        @handleClose="delTag"
        @handleAdd="addTag"
      ></TagManip>
    </template>
    <!--右侧 -->
    <template #right-head>
      <AssessmentBlock :block-list="blockList"></AssessmentBlock>
    </template>
    <template #tab-content-assetProfile>
      <LayoutDraw :left-num="5">
        <template #content-title-1>基础信息</template>
        <template #content-body-1>
          <LayoutFormList :form-list="baseInfo"></LayoutFormList>
        </template>
        <template #content-title-2>whois信息</template>
        <template #content-body-2>
          <template v-if="expandableList.length">
            <LayoutExpandableBox
              v-for="(item1, index) in expandableList"
              :key="index"
              :expandable-info="item1"
            >
              <template #content="{ slotContent }">
                <ShowCode
                  :code-info="{
                    code: slotContent,
                  }"
                  class="domain-container"
                >
                </ShowCode>
              </template>
            </LayoutExpandableBox>
          </template>
          <noData v-else class="no-data"></noData>
        </template>
        <template #content-title-3>ICP备案信息</template>
        <template #content-body-3>
          <LayoutFormList :form-list="icpInfo"></LayoutFormList>
        </template>
        <template #content-title-4>解析记录</template>
        <template #content-body-4>
          <el-table
            v-if="resolutionList.length"
            :data="resolutionList"
            class="info-table"
            max-height="324"
            border
            :show-header="false"
          >
            <el-table-column
              prop="dnsRecordType"
              sortable
              label="记录类型"
              :min-width="1"
              class-name="dns-record-type"
            >
            </el-table-column>

            <el-table-column
              prop="values"
              sortable
              label="记录值"
              :min-width="3"
            >
              <template v-slot:default="scope">
                <template v-if="scope.row.values.length == 0"> -- </template>
                <template v-else>
                  <el-tooltip
                    v-for="(tag, index) in scope.row.values"
                    :key="index"
                    effect="dark"
                    :content="tag"
                    placement="bottom"
                  >
                    <el-tag hit>
                      <span class="tag-text">{{ tag }}</span>
                    </el-tag>
                  </el-tooltip>
                </template>
              </template>
            </el-table-column>
          </el-table>
          <noData v-else class="no-data"></noData>
        </template>
        <template #content-title-5>子域名信息</template>
        <template #content-body-5>
          <el-form
            :inline="true"
            :model="tableConfig.params"
            class="table-search"
            @submit.native.prevent
          >
            <el-form-item label="子域名">
              <el-input
                v-model="tableConfig.params.subdomain"
                placeholder="子域名"
                @keyup.enter.native="reloadTable"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="reloadTable">查询</el-button>
            </el-form-item>
          </el-form>
          <!-- <vul-table ref="table" v-bind="tableConfig"></vul-table> -->
          <el-table
            :data="tableConfig.tableData"
            class="info-table"
            max-height="605"
          >
            <el-table-column
              v-for="item in tableConfig.columns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
            >
              <template v-slot:default="scope">
                <div v-if="item.prop == 'isAlive'">
                  {{ isAliveObj[scope.row[item.prop]] }}
                </div>
                <div v-else>
                  {{ scope.row[item.prop] || '--' }}
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="self-pagination"
            size="small"
            :current-page="tableConfig.params.pageNumber"
            :page-size="tableConfig.params.pageSize"
            :page-sizes="[5, 10, 15, 20, 50, 100]"
            :layout="'total, sizes, prev, pager, next, jumper'"
            :total="tableConfig.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </template>
        <template #right-title>资产变更记录</template>
        <template #right-body>
          <LayoutNoticeList :notice-list="noticeList"></LayoutNoticeList>
        </template>
      </LayoutDraw>
    </template>
    <template #tab-content-exposurePath>
      <GraphExposurePath :row-list="rowList"></GraphExposurePath>
    </template>
    <template #tab-content-associatedExposure>
      <GraphExposureSurface :row-list="rowList"></GraphExposureSurface>
    </template>
    <template #tab-content-surfaceAnalysis>
      <GraphSurfaceAnalysis :row-list="rowList"></GraphSurfaceAnalysis>
    </template>
  </LayoutDetail>
</template>
<script lang="ts" setup>
import LayoutDetail from '@/components/Expose/Layout/Detail.vue';
import LayoutInfoList from '@/components/Expose/Layout/InfoList.vue';
import LayoutFormList from '@/components/Expose/Layout/FormList.vue';
import LayoutExpandableBox from '@/components/Expose/Layout/ExpandableBox.vue';
import LayoutNoticeList from '@/components/Expose/Layout/NoticeList.vue';
import LayoutDraw from '@/components/Expose/Layout/Draw.vue';
import GraphExposurePath from '@/components/Expose/Graph/ExposurePath.vue';
import GraphExposureSurface from '@/components/Expose/Graph/ExposureSurface.vue';
import GraphSurfaceAnalysis from '@/components/Expose/Graph/SurfaceAnalysis.vue';
import ModelList from '@/components/Expose/ModelList.vue';
import TagManip from '@/components/Expose/TagManip.vue';
import AssessmentBlock from '@/components/Expose/AssessmentBlock.vue';
import ShowCode from '@/components/Expose/ShowCode.vue';
import noData from '@/components/Expose/noData.vue';
import { usewebDetail } from '@/composables/Expose/usewebDetail';
import { useRoute } from 'vue-router';
import { ref, reactive, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const route = useRoute();
const {
  detialInfo,
  basicInfo,
  delTag,
  addTag,
  showPrompt,
  category,
  blockList,
  changeList,
  getDetialById,
  getLeftBaseInfo,
  getAssetChanged,
  getAnalysis,
} = usewebDetail();
const id = ref(route.query.id || '');
const tabActive = ref('assetProfile');
const icpDetail = ref<any>({});
const tabsList = ref([
  {
    name: 'assetProfile',
    label: '资产画像',
    disabled: false,
  },
  {
    name: 'exposurePath',
    label: '资产暴露路径',
    disabled: false,
  },
  {
    name: 'associatedExposure',
    label: '关联暴露面',
    disabled: false,
  },
]);

const whoisList = ref([]);
const resolutionList = ref([]);
const childList = ref([]);
const tableConfig = reactive({
  uri: 'detail/getSubDomainById',
  params: {
    subdomain: '', // 子域名
    domainId: id, // 域名id
    pageNumber: 1,
    pageSize: 10,
  },
  tableAttr: {
    'max-height': '605px',
  },
  columns: [
    {
      label: '子域名',
      prop: 'subdomainName',
    },
    {
      label: '所属单位',
      prop: 'company',
    },
    {
      label: '存活状态',
      prop: 'isAlive',
      render: (h, c) => {
        let isAliveObj = {
          0: '否',
          1: '是',
          2: '未知',
        };
        let val = isAliveObj[Number(c.row.isAlive)];
        return h('div', { style: {} }, val);
      },
    },
  ],
  tableData: [],
  total: 0,
});
const isAliveObj = reactive({
  0: '否',
  1: '是',
  2: '未知',
});
const titleBtn = computed(() => {
  const urlList = ['http', 'https'];
  let array = [
    {
      flag: 'url',
      tip: '访问',
      icon: 'vul-icon-url',
    },
  ];

  if (!urlList.includes(detialInfo.value.protocol)) {
    array = array.filter((el) => el.flag !== 'url');
  }

  return array;
});
const infoList = computed(() => {
  const { dataStatus, isAlive, createTime, updateTime, company } =
    basicInfo.value;

  const foundStatus = store.state.enum.assetStatus.find(
    (status) => status.type === parseInt(dataStatus),
  );

  return [
    {
      label: '更新状态',
      icon: 'vul-icon-type',
      type: 'tag',
      tag: foundStatus ? foundStatus.tag : '',
      content: foundStatus ? foundStatus.value : '未知',
    },
    {
      label: '存活状态',
      icon: 'vul-icon-type',
      type: 'img',
      src: isAlive
        ? require(`@/static/images/icon/survival-${parseInt(isAlive)}.png`)
        : '',
    },
    {
      label: '首次发现',
      icon: 'vul-icon-time',
      content: createTime,
    },
    {
      label: '数据更新',
      icon: 'vul-icon-time',
      content: updateTime,
    },
    {
      label: '所属单位',
      icon: 'vul-icon-company',
      content: company,
    },
  ];
});
const baseInfo = computed(() => {
  const { domain, rootDomain, domainIsp, unexpired, domainType } =
    detialInfo.value;
  return [
    {
      label: '域名',
      content: domain,
    },

    {
      label: '域名是否过期',
      content: unexpired ? '未过期' : unexpired == null ? '--' : '过期',
    },
    {
      label: '根域名',
      content: rootDomain,
    },
    {
      label: '域名类型',
      content: domainType,
    },
    {
      label: '服务商',
      content: domainIsp,
    },
  ];
});
const noticeList = computed(() => {
  return changeList.value.map(
    ({ fieldAlias, newValue, oldValue, changeTime, opType }) => {
      const btn = store.state.enum.changeStatus.find(
        ({ type }) => type === opType,
      );

      return {
        title: fieldAlias,
        content: opType === 3 ? oldValue : newValue,
        time: changeTime,
        type: btn ? btn.tag : '',
        typeText: btn ? btn.value : '',
      };
    },
  );
});
const icpInfo = computed(() => {
  if (!icpDetail.value) {
    return [];
  }
  const {
    websiteName,
    permitNumber,
    organizerType,
    organizerName,
    websiteDirector,
    registeredDomain,
  } = icpDetail.value;
  return [
    {
      label: '网站标题',
      content: websiteName,
    },
    {
      label: '备案许可证号',
      content: permitNumber,
    },
    {
      label: '主办单位性质',
      content: organizerType,
    },
    {
      label: '主办单位名称',
      content: organizerName,
    },
    {
      label: '网站负责人',
      content: websiteDirector,
    },
    {
      label: '备案域名',
      content: registeredDomain,
    },
  ];
});
const expandableList = computed(() => {
  return whoisList.value.map((el: any) => {
    return {
      labelLength: 112,
      head: [
        {
          label: '域名',
          content: el.domain,
        },
        {
          label: '是否过期',
          ...(el.certExpiredBln
            ? {
                content: '过期',
                contentType: 'danger',
                contentIcon: 'vul-icon-prompt-line',
              }
            : {
                content: '未过期',
                contentType: 'success',
                contentIcon: 'vul-icon-success-a',
              }),
        },
      ],
      body: [
        {
          label: '更新时间',
          content: el.whoisUpdateTime,
        },
        {
          label: '过期时间',
          content: el.expirationTime,
        },
        {
          label: '注册商',
          content: el.registrar,
        },
        {
          label: '注册商服务器',
          content: el.domainServer,
        },
        {
          label: 'DNS',
          content: el.dns,
        },
        {
          label: '状态',
          content: el.whoisStatus,
        },
        {
          label: 'whois原文',
          content: el.content,
          row: true,
        },
      ],
    };
  });
});
const rowList = computed(() => {
  return {
    assetId: id.value,
    assetType: category.value,
  };
});
onMounted(async() => {
  category.value = 'domain';
 await getDetialById('detail/getDomainById');
 await getLeftBaseInfo();
 await getAnalysis();
 await getAssetChanged();
 await getWhoisById();
 await getResolutionById();
 await getDomainIcpInfo();
 await getDataData();
});
const getDataData = async () => {
  let { params, uri } = tableConfig;
  const { code, data } = await store.dispatch(uri, params);
  if (code == 0) {
    let { list, total } = data;
    tableConfig.tableData = list || [];
    tableConfig.total = total;
  }
};
const handleSizeChange = async (v) => {
  tableConfig.params.pageSize = v;
  await getDataData();
};
const handleCurrentChange = async (v) => {
  tableConfig.params.pageNumber = v;
  await getDataData();
};
const getResolutionById = async () => {
  const { code, data } = await store.dispatch('detail/getResolutionById', {
    params: { domainId: id.value },
  });
  resolutionList.value = code === 0 ? data : [];
};
const getWhoisById = async () => {
  const { code, data } = await store.dispatch('detail/getWhoisById', {
    params: { domainId: id.value },
  });
  whoisList.value = code === 0 ? data : [];
};

// 域名ICP备案信息
const getDomainIcpInfo = async () => {
  const { code, data } = await store.dispatch(
    'detail/getDomainIcpInfo',
    id.value,
  );
  icpDetail.value = code === 0 ? data : {};
};
const reloadTable = () => {
  // this.$refs.table.reload()
  tableConfig.params.pageNumber = 1;
  getDataData();
};
</script>
<style lang="scss" scoped>
.domain-container {
  display: inline-block;
  height: 145px;
  overflow: auto;
  width: 100%;
}

.no-data {
  margin-top: $-v-spacing-horizontal-base;
}

.table-search {
  margin-top: $-v-spacing-horizontal-base;
  text-align: right;
}

.child-container {
  max-height: 300px;
  overflow: auto;

  .el-tag {
    margin-top: $-v-spacing-horizontal-small;

    & + .el-tag {
      margin-left: $-v-spacing-vertical-icon;
    }
  }
}

.info-table {
  margin-top: $-v-spacing-horizontal-base;

  &::v-deep tr .dns-record-type {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }

  .el-tag {
    margin-right: 8px;
    height: 30px;
    line-height: 28px;
    max-width: 156px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
  }

  ::v-deep thead th {
    font-weight: 500;
  }
}

.self-pagination {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;

  ::v-deep .el-pagination__total {
    margin-right: 19px;
    color: rgb(60, 84, 113);
    font-size: 12px !important;
  }

  ::v-deep .el-select .el-input {
    width: 100px;
    margin: 0px 5px;
  }

  ::v-deep .el-select {
    width: 110px;
  }

  ::v-deep .el-input .el-input__inner {
    font-size: 13px;
  }

  ::v-deep .el-pagination__jump {
    margin-left: 5px;
    color: rgb(60, 84, 113);
    font-size: 12px !important;
  }

  ::v-deep .el-pagination__editor.el-input {
    width: 50px;
  }

  ::v-deep .el-select__wrapper {
    font-size: 12px !important;
  }

  ::v-deep .el-pagination__sizes {
    margin-left: 0;
  }

  ::v-deep .el-pager li {
    font-size: 12px !important;
  }
}
</style>
